<template>
	<div>
		<div class="img" >
		  <tailoring></tailoring>
		</div>
		
		
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-form-item label="姓名" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>
			<el-form-item label="电话" prop="phone"><el-input v-model="ruleForm.phone"></el-input></el-form-item>
			<el-form-item label="密码" prop="password"><el-input placeholder="请输入密码" v-model="ruleForm.password" show-password></el-input></el-form-item>
			<el-form-item label="单位" prop="company">
				<el-select v-model="ruleForm.company" placeholder="请选择单位">
					<el-option v-for="c in companys" :label="c" :value="c">{{ c }}</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="状态" prop="status"><el-switch v-model="ruleForm.status"></el-switch></el-form-item>
			<el-form-item label="专业领域" prop="specialty">
				<el-checkbox-group v-model="ruleForm.specialty">
					<el-checkbox v-for="s in specialtys" :label="s" name="type">{{ s }}</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="性别" prop="sex">
				<el-radio-group v-model="ruleForm.sex">
					<el-radio label="男"></el-radio>
					<el-radio label="女"></el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="会员编号" prop="numberCard">
				<el-input v-model="ruleForm.numberCard">
					<template slot="prepend">
						001000-
					</template>
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
				<el-button @click="resetForm('ruleForm')">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import tailoring from './Tailoring.vue'
export default {
	name: 'addExpert',
	components:{
		tailoring
	},
	data() {
		return {
			companys: ['济南市中心医院', '齐鲁医院', '山大二院'],
			specialtys: ['儿科', '神经内科', '皮肤科', '消化科'],

			ruleForm: {
				name: '',
				sex: '男',
				phone: '',
				password: '',
				status: true,
				specialty: [],
				company: '',
				numberCard: ''
			},
			rules: {
				name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
				phone: [
					{ required: true, message: '手机号不能为空', trigger: 'blur' },
				{ pattern: /^[1][3578]\d{9}$/, message: '请输入正确的手机号' }],
				password: [
					{ required: true, message: '密码不能为空', trigger: 'blur' },
					{ pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/, message: '长度至少为8，至少含有一个字母和一个数字' }
				],

				specialty: [{ type: 'array', required: true, message: '请至少选择一个专业领域', trigger: 'change' }],
				company: [ { required: true, message: '请选择工作单位', trigger: 'change' }],
				numberCard: [
					{ required: true, message: '会员编号不能为空', trigger: 'blur' },
					{ pattern: /^[0-9]\d{5}$/, message: '会员编号为六位数字' },
					]
			}
		};
	},
	methods: {
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					console.log(this.ruleForm);
					
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		selectPhotos(){
		 
		},
	}
};
</script>

<style>
.demo-ruleForm {
	width: 60%;
}
.el-form-item__content {
	text-align: left;
}
</style>
